<template>
  <input
    v-for="(item, index) in data"
    :key="index"
    type="button"
    :value="item.tabname"
    @click="datanum(index)"
  />
  <component :is="data[num].component"></component>
</template>

<script setup>
import { ref } from 'vue'
import HomeTap from './HomeTap.vue'
import ProfileTap from './ProfileTap.vue'
import SettingsTap from './SettingsTap.vue'

let data = [
  { tabname: 'Home', component: HomeTap },
  { tabname: 'Profile', component: ProfileTap },
  { tabname: 'Settings', component: SettingsTap },
]
let num = ref(0)
function datanum(index) {
  num.value = index
}
</script>
